<template>
  <Card>
    <Modal v-model="updateModal" width="380" :title="`回复 ${currentMessage.sender_name}`">
      <Form ref="formInline" :model="formInline" :label-width="90" :rules="ruleInline">
        <Row>
          <Col span="20">
            <Row>
              <FormItem prop="title" label="消息标题">
                <Input type="text" v-model="formInline.title" placeholder="请输入消息标题" />
              </FormItem>
            </Row>
            <Row>
              <FormItem prop="content" label="消息内容">
                <Input
                  type="textarea"
                  :rows="6"
                  v-model="formInline.content"
                  placeholder="请填写消息内容"
                />
              </FormItem>
            </Row>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="success" @click="sendMessage">完成</Button>
        <Button type="default" @click="updateModal = false">关闭</Button>
      </div>
    </Modal>
    <p slot="title">消息列表</p>
    <Table span="10" border :columns="columns" :data="messages.list"></Table>
    <Page :total="messages.total" style="margin-top:20px" :page-size="10"></Page>
  </Card>
</template>

<script>
export default {
  data() {
    return {
      updateModal: false,
      currentMessage: {},
      messages: [],
      formInline: {
        title: "",
        content: "",
        addressee_id: ""
      },
      ruleInline: {
        title: [
          { required: true, message: "请填写标题", trigger: "blur" },
          {
            type: "string",
            message: "请输入标题",
            trigger: "blur"
          }
        ],
        content: [
          { required: true, message: "请填写消息内容", trigger: "blur" },
          {
            type: "string",
            message: "请填写消息内容",
            trigger: "blur"
          }
        ]
      },
      columns: [
        {
          title: "发件人",
          key: "sender_name",
          width: 150,
          fixed: "left"
        },
        {
          title: "标题",
          key: "title",
          width: 400,
          align: "center"
        },
        {
          title: "内容",
          key: "content",
          width: 450,
          align: "center"
        },
        {
          title: "发送时间",
          width: 100,
          render: (h, params) => {
            let date = new Date(params.row.create_date);
            return h(
              "div",
              `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
            );
          }
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 150,
          align: "center",
          render: (h, params) => {
            let bar = [];
            bar.push(
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.currentMessage = params.row;
                      this.formInline.addressee_id = params.row.sender_id;
                      this.updateModal = true;
                    }
                  }
                },
                "回复"
              )
            );
            bar.push(
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginLeft: "10px"
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: "确认删除？",
                        onOk: () => {
                          this.jsonrpc.contribute.user
                            .removeMessageByID(params.row.id)
                            .then(res => {
                              this.$Message.success("删除成功");
                              this.getMessages({});
                            })
                            .catch(error => {
                              console.error(error);
                              this.$Message.error("删除失败");
                            });
                        }
                      });
                    }
                  }
                },
                "删除"
              )
            );
            return h("div", bar);
          }
        }
      ]
    };
  },
  methods: {
    sendMessage: function() {
      this.jsonrpc.contribute.user
        .sendMessage(this.formInline)
        .then(res => {
          if (res) {
            this.$Message.success("回复成功");
            this.updateModal = false;
            this.formInline = {
              title: "",
              content: "",
              addressee_id: ""
            };
          }
        })
        .catch(error => {
          this.$Message.error("请稍后重试");
        });
    },
    "getMessages":function({start = 0,limit = 10}) {
        this.jsonrpc.contribute.user.getMessages({start,limit}).then(res => {
            this.messages = res;
        });
    }
  },
  mounted() {
    this.jsonrpc.contribute.user.getMessages({}).then(res => {
      this.messages = res;
    });
  }
};
</script>

<style lang="stylus" scoped></style>